<template>
    <div class="index-page">
        <div class="index-top clearfix">
            <Row :gutter="10">
                <Col :xs="24" :ms="24" :md="24" :lg="6" :style="{marginBottom: '10px'}">
                <div class='account-info top-card fl shadow' :class="animateShow1">
                    <!-- <h4>账户信息</h4> -->
                    <div class="top-bar"></div>
                    <div class="wrap" :style="{marginBottom: '14px'}">
                        <div class="info wrap-item mb10" >
                            <!-- <h5>昨日预收标保<span class="value">0.00</span></h5> -->
                            <Col span="10" offset="1" class="avatar">
                            <div class="hua">昨日预收标保</div>
                            </Col>
                            <Col span="13" class="balance">
                            <p class="value">0.00&nbsp;<span style="fontSize:12px;color:#999;">元</span></p>
                            </Col>
                        </div>
                        <div class="safe-lever wrap-item">
                            <Row>
                                <Col span="7" offset="1" class="">安全等级：</Col>
                                <Col span="15" class="">
                                <div class='safe-wrap' style="background-color: #f2f2f2;border-radius:5px;margin-top:5px;">
                                    <div :style="safeBarStyle"></div>
                                </div>
                                </Col>
                            </Row>
                        </div>
                        <div class="account wrap-item">
                            <Row>
                                <Col span="6" offset="1" class="">账号：</Col>
                                <Col span="16" class="">{{name}}</Col>
                            </Row>
                        </div>
                        <div class="company wrap-item">
                            <Row>
                                <Col span="6" offset="1" class="">公司：</Col>
                                <Col span="16" class="">{{companyname}}</Col>
                            </Row>
                        </div>
                    </div>
                </div>
                </Col>
                <Col :xs="24" :ms="24" :md="24" :lg="6" :style="{marginBottom: '10px'}">
                <div class='quantity-sale top-card fl shadow' :class="animateShow2">
                    <!-- <h4>统计</h4> -->
                    <div class="top-bar"></div>
                    <div class="wrap">
                        <div class="top">
                            <h5>昨日预收保单件数(件)</h5>
                            <p class="value">0.00</p>
                        </div>
                        <div class="bottom">
                            <h5>总保费(元)</h5>
                            <p class="value">0.00</p>
                        </div>
                    </div>
                </div>
                </Col>
                <Col :xs="24" :ms="24" :md="24" :lg="6" :style="{marginBottom: '10px'}">
                <div class='ranking-sale top-card fl shadow' :class="animateShow3">
                    <!-- <h4>销售排行</h4> -->
                    <div class="top-bar"></div>
                    <div class="wrap">
                        <div class="top">
                            <h5>本月承保标保</h5>
                            <p class="value">0</p>
                        </div>
                        <div class="bottom">
                            <h5>总订单(个)</h5>
                            <p class="value">0</p>
                        </div>
                    </div>
                </div>
                </Col>
                <Col :xs="24" :ms="24" :md="24" :lg="6" :style="{marginBottom: '10px'}">
                <div class='top-pro top-card fl shadow' :class="animateShow4">
                    <!-- <h4>热销产品</h4> -->
                    <div class="top-bar"></div>
                    <div class="wrap">
                        <div class="top">
                            <h5>本月承保保单件数(件)</h5>
                            <p class="value">0.00</p>
                        </div>
                        <div class="bottom">
                            <h5>总服务费(元)</h5>
                            <p class="value">0.00</p>
                        </div>
                    </div>
                </div>
                </Col>
            </Row>
        </div>
        <Row class="margin-top-10">
            <div :style="echartWrapStyle">
                <div id="line" style="width:100%;height:100%;"></div>
            </div>
        </Row>
        <!-- <div :style="echartWrapStyle">       
            <div style="width:100%;height:100%;" id="visite_volume_con"></div>
        </div> -->
    </div>
</template>
<script>
    import echarts from 'echarts'
    export default {
        data() {
            return {
                animateShow1: '',
                animateShow2: '',
                animateShow3: '',
                animateShow4: '',
                echartWrapStyle: {
                    backgroundColor: '#fff',
                    height: '500px'
                },
                mainStyle: {
                    marginTop: '20px',
                },
                safeBarStyle: {
                    height: '10px',
                    backgroundColor: '#4074e1',
                    width: '0',
                    borderTopLeftRadius: '5px',
                    borderBottomLeftRadius: '5px',
                    transition: ' width 1s',
                }
            }
        },
        computed: {
            avatar() {
                return this.$store.state.user.avatar ? this.$store.state.user.avatar :
                    "http://i.kuaibao365.com/tpl/20170829/150397337160390.png";
            },
            name() {
                return this.$store.state.user.name;
            },
            companyname() {
                return this.$store.state.user.name;
            },
            echartsHeight() {
                let winHeight = screen.availHeight;
                return winHeight - 56 - 51 - 93 - 191 - 20 - 30 + 'px'
            },
        },
        created: {

        },
        mounted() {

        },
        methods: {
            drawLine(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    tooltip: {
                        trigger: 'item',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    grid: {},
                    legend: {
                        data: []
                    },
                    xAxis: {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    },
                    yAxis: {
                        gridIndex: 0,
                        type: 'value',
                        name: '销售额',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value} 万元'
                        }
                    },
                    series: [{
                        name: '销售额',
                        type: 'line',
                        yAxisIndex: 0,
                        // data: [10, 20, 30, 40, 100, 104, 230, 80, 10, 124, 213, 234]
                        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                    }],
                    color: [
                        '#4074e1'
                    ]
                })
                window.addEventListener('resize', function () {
                    this.charts.resize();
                });
            },
        },
        mounted() {
            const option = {
                tooltip: {
                    trigger: 'item',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid: {},
                legend: {
                    data: []
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                },
                yAxis: {
                    gridIndex: 0,
                    type: 'value',
                    name: '销售额',
                    min: 0,
                    max: 250,
                    interval: 50,
                    axisLabel: {
                        formatter: '{value} 万元'
                    }
                },
                series: [{
                    name: '销售额',
                    type: 'line',
                    yAxisIndex: 0,
                    // data: [10, 20, 30, 40, 100, 104, 230, 80, 10, 124, 213, 234]
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                }],
                color: [
                    '#4074e1'
                ]
            }
            const serviceRequestCharts = echarts.init(document.getElementById('line'));
            serviceRequestCharts.setOption(option);

            window.addEventListener('resize', function () {
                serviceRequestCharts.resize();
            });
            this.safeBarStyle.width = '50%'
            setTimeout(() => {
                this.animateShow1 = 'active'
            }, 100)
            setTimeout(() => {
                this.animateShow2 = 'active'
            }, 300)
            setTimeout(() => {
                this.animateShow3 = 'active'
            }, 500)
            setTimeout(() => {
                this.animateShow4 = 'active'
            }, 700)


            // let visiteVolume = echarts.init(document.getElementById('visite_volume_con'));
            // let xAxisData = [];
            // let data1 = [];
            // let data2 = [];


            // const options = {
            //     tooltip: {
            //         trigger: 'axis',
            //         axisPointer: {
            //             type: 'shadow'
            //         }
            //     },
            //     grid: {
            //         top: 0,
            //         left: '2%',
            //         right: '10%',
            //         bottom: '3%',
            //         containLabel: true
            //     },
            //     xAxis: {
            //         name:'标准保费（万元）',
            //         type: 'value',
            //         boundaryGap: [0, 0.01]
            //     },
            //     yAxis: {
            //         type: 'category',
            //         data: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
            //         nameTextStyle: {
            //             color: '#c3c3c3'
            //         }
            //     },
            //     series: [
            //         {
            //             name: '访问量',
            //             type: 'bar',
            //             data: [
            //                 {value: 453682, name: 'Mon', itemStyle: {normal: {color: '#2d8cf0'}}},
            //                 {value: 879545, name: 'Tues', itemStyle: {normal: {color: '#2d8cf0'}}},
            //                 {value: 2354678, name: 'Wed', itemStyle: {normal: {color: '#2d8cf0'}}},
            //                 {value: 1598403, name: 'Thur', itemStyle: {normal: {color: '#2d8cf0'}}},
            //                 {value: 543250, name: 'Fri', itemStyle: {normal: {color: '#2d8cf0'}}},
            //                 {value: 1305923, name: 'Sat', itemStyle: {normal: {color: '#2d8cf0'}}},
            //                 {value: 1103456, name: 'Sun', itemStyle: {normal: {color: '#2d8cf0'}}}
            //             ]
            //         }
            //     ]
            // };

            // visiteVolume.setOption(options);

            // window.addEventListener('resize', function () {
            //     visiteVolume.resize();
            // });


        }
    }
</script>
<style scoped>
    .index-page {
        height: 100%;
        width: 100%;
        background-color: #edf2f6;
    }

    .index-page .shadow {
        box-shadow: 0px 0px 5px #999;
    }

    .index-page .top-card {
        position: relative;
        top: 40px;
        /* height: 191px; */
        margin-right: 1.16%;
        width: 100%;
        transition: all 0.8s;
    }

    .index-page .top-card.active {
        top: 0px;
    }

    .index-page .account-info {
        width: 100%;
    }

    .index-page .top-pro {
        margin-right: 0;
    }

    .hua {
        font-size: 14px;
        color: #999;
        font-weight: normal;
    }

    .top-card .wrap {
        width: 100%;
        background-color: #fff;
    }

    .account-info .wrap {
        padding: 20px 0;
    }

    .top-card .wrap .wrap-item {
        margin-top: 10px;
    }

    .top-card .top-bar {
        height: 5px;
        width: 100%;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .top-card.account-info .top-bar {
        background-color: #4074e1;
    }

    .top-card.quantity-sale .top-bar {
        background-color: #69efe6;
    }

    .top-card.ranking-sale .top-bar {
        background-color: #ff855e;
    }

    .top-card.top-pro .top-bar {
        background-color: #adeda1;
    }

    .index-page .info {
        line-height: 32px;
        text-align: center;
    }

    .index-page .info .avatar {
        text-align: left;
    }

    .index-page .info .avatar img {
        width: 32px;
        border: 1px solid #dfdfdf;
        border-radius: 30px;
    }

    .index-page .info .balance span {
        color: #358bee;
        font-size: 24px;
    }

    .index-page .info .clearing {
        background-color: #358bf2;
        color: #fff;
        border-radius: 5px;
    }

    .index-page .info .recharge {
        background-color: #ff6769;
        color: #fff;
        border-radius: 5px;
    }

    .index-page .ivu-col.ivu-col-span-16 {
        height: 100%;
    }

    .top-card .wrap h5 {
        font-size: 14px;
        color: #999;
        font-weight: normal;
        text-align: center;
    }

    .top-card .wrap .value {
        font-size: 30px;
        color: #00a8f7;
        font-weight: 700;
        text-align: center;
    }

    .top-card .wrap .top {
        padding: 13px 20px;
        border-bottom: 1px solid #efefef;
    }

    .top-card .wrap .bottom {
        padding: 13px 20px;
    }

    .top-card .wrap .bottom .value {
        color: #656f7e;
    }

    #line {
        width: 100%;
    }
</style>